<template>
  <div id="sales"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      array: []
    }
  },
  props: ['todayCart'],
  watch: {
    todayCart: function (newVal, oldVal) {
      this.array = newVal
      this.renderline()
    }
  },
  methods: {
    renderline() {
      const myPieChart = echarts.init(document.getElementById('sales'))
      const name = this.array.map(item => item.name)
      const value = this.array.map(item => item.value)

      const pieOption = {
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: name,
          // data: name,
          // 去除轴线
          axisLine: {
            show: false
          },
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // 去除轴线
          axisLine: {
            show: false
          },
          // 文字调整
          axisLabel: {
            show: false // x轴文字颜色
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // Y轴分割线（图表中的哪些横线）
          splitLine: {
            show: false
          }
        },
        color: ['#1fabcf'],
        series: [
          {
            name: '日增量',
            type: 'pictorialBar',
            barCategoryGap: '-30%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',

            itemStyle: {
              opacity: 1,
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  color: '#1fabcf'
                }
              }
            },
            emphasis: {
              itemStyle: {
                opacity: 0.5
              }
            },
            data: value,
            z: 10
          }
        ]
      }

      myPieChart.setOption(pieOption)
    }
  }
}
</script>
<style lang="less" scoped>
#sales {
  width: 100%;
  height: 100%;
}
</style>
